<template>
    <el-tabs type="border-card" style="margin-top: 10px">
        <el-tab-pane label="历史电力缴费">
            <el-table :data="pagedHistoryUsage" border stripe
                style="width: 100%; font-size: 12px; margin-top: 10px" :empty-text="'暂无电力缴费信息'">
                <el-table-column prop="address" label="用电地址" show-overflow-tooltip></el-table-column>
                <el-table-column prop="yearMonth" label="年月" width="80"></el-table-column>
                <el-table-column prop="electricityUsage" label="用电量" width="80"></el-table-column>
                <el-table-column prop="paymentStatus" label="结清标志" width="100">
                    <template #default="scope">
                        <span :style="{ color: scope.row.paymentStatus === '全部结清' ? '#67c23a' : '#f56c6c' }">
                            {{ scope.row.paymentStatus }}
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next, jumper, total" :total="historyUsage.length"
                :page-size="pageSize" :current-page="historyUsagePageIdx"
                small>
            </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="最新月用电情况">
            <el-table :data="pagedCurrentUsage" border stripe
                style="width: 100%; font-size: 12px; margin-top: 10px" :empty-text="'暂无最新电力数据'">
                <el-table-column prop="address" label="用电地址" show-overflow-tooltip></el-table-column>
                <el-table-column prop="totalReading" label="总示数" width="100"></el-table-column>
                <el-table-column prop="peakReading" label="峰示数" width="100"></el-table-column>
                <el-table-column prop="valleyReading" label="谷示数" width="100"></el-table-column>
                <el-table-column prop="date" label="日期" width="100"></el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next, jumper, total" :total="currentUsage.length"
                :page-size="pageSize" :current-page="currentUsagePageIdx"
                small>
            </el-pagination>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import { ElTabs, ElTabPane, ElTable, ElTableColumn, ElPagination } from 'element-plus';

const historyUsage = ref([
      {
        address: '古河路5号万山城市花园41号楼2单元602室',
        yearMonth: '202508',
        electricityUsage: 0,
        paymentStatus: '全部结清'
      },
      {
        address: '古河路5号万山城市花园41号楼2单元602室',
        yearMonth: '202507',
        electricityUsage: 0,
        paymentStatus: '全部结清'
      },
      {
        address: '古河路5号万山城市花园41号楼2单元602室',
        yearMonth: '202506',
        electricityUsage: 0,
        paymentStatus: '全部结清'
      },
      {
        address: '古河路5号万山城市花园41号楼2单元602室',
        yearMonth: '202505',
        electricityUsage: 0,
        paymentStatus: '全部结清'
      },
      {
        address: '古河路5号万山城市花园41号楼2单元602室',
        phone: '18994540012',
        yearMonth: '202504',
        electricityUsage: 0,
        paymentStatus: '全部结清'
      },
      {
        address: '古河路5号万山城市花园41号楼2单元603室',
        phone: '18994540012',
        yearMonth: '202503',
        electricityUsage: 0,
        paymentStatus: '全部结清'
      },
      {
        address: '古河路5号万山城市花园41号楼2单元604室',
        phone: '18994540012',
        yearMonth: '202502',
        electricityUsage: 0,
        paymentStatus: '全部结清'
      },
      {
        address: '古河路5号万山城市花园41号楼2单元605室',
        phone: '18994540012',
        yearMonth: '202501',
        electricityUsage: 0,
        paymentStatus: '全部结清'
      },
      {
        address: '古河路5号万山城市花园41号楼2单元606室',
        phone: '18994540012',
        yearMonth: '202412',
        electricityUsage: 7,
        paymentStatus: '全部结清'
      },
      {
        address: '古河路5号万山城市花园41号楼2单元607室',
        phone: '18994540012',
        yearMonth: '202411',
        electricityUsage: 0,
        paymentStatus: '全部结清'
      },
      {
        address: '古河路5号万山城市花园41号楼2单元608室',
        phone: '18994540012',
        yearMonth: '202410',
        electricityUsage: 0,
        paymentStatus: '全部结清'
      },
      {
        address: '古河路5号万山城市花园41号楼2单元609室',
        phone: '18994540012',
        yearMonth: '202409',
        electricityUsage: 0,
        paymentStatus: '全部结清'
      }
]);
const currentUsage = ref([
    {
      address: '古河路5号万山城市花园41号楼2单元602室',
      phone: '17705136111',
      totalReading: 7.01,
      peakReading: 6.05,
      valleyReading: 0.95,
      date: '2025/9/29'
    }

]);

const pageSize = ref(10);
const historyUsagePageIdx = ref(1);
const currentUsagePageIdx = ref(1);

const pagedHistoryUsage = computed(() => {
    const start = (historyUsagePageIdx.value - 1) * pageSize.value;
    return historyUsage.value.slice(start, start + pageSize.value);
});

const pagedCurrentUsage = computed(() => {
    const start = (currentUsagePageIdx.value - 1) * pageSize.value;
    return currentUsage.value.slice(start, start + pageSize.value);
});
</script>